<template>
  <div class="flex items-center justify-between pt-[16px] pb-[8px]">
    <div>
      <template v-for="item in leftActions" :key="item.label">
        <el-button
          v-if="checkShow(item)"
          :type="item.type"
          @click="item.fn"
          v-bind="item.itemProps"
          v-hasPermi="item?.permission"
        >
          <i v-if="item.icon" class="iconfont mr-[2px]" :class="item.icon"></i>
          {{ item.label }}
        </el-button>
      </template>
      <slot name="left"></slot>
    </div>
    
    <div>
      <template v-for="item in rightActions" :key="item.label">
        <el-button
          v-if="checkShow(item)"
          :type="item.type"
          @click="item.fn"
          v-bind="item.itemProps"
          v-hasPermi="item?.permission"
        >
          <i v-if="item.icon" class="iconfont mr-[2px]" :class="item.icon"></i>
          {{ item.label }}
        </el-button>
      </template>
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  actions: { type: Array, default: () => [] },
})
const { actions = [] } = toRefs(props)
const leftActions = computed(() => {
  return actions.value?.filter(n => !n.right || n.left)
})

const rightActions = computed(() => {
  return actions.value?.filter(n => !!n.right)
})

const checkShow = item => {
  const { show } = item
  return show ? show?.(item) : true
}
</script>
